<template>
  <a-table
    :loading="loading"
    :pagination="pagination"
    :columns="columns"
    :data="domainList"
    :bordered="false"
  >
    <template #domainName="{ record }">
      {{ record.domain }}
    </template>
    <template #status="{ record }">
      <span v-if="record.label === '恶意'" class="circle red">
        恶意域名
      </span>
      <span v-else class="circle green">
        正常域名
      </span>
    </template>
    <template #aptPredictions="{ record }">
      <span v-if="record.apt_predictions.length > 0">
        <Maxprop :aptPredictions="record.apt_predictions"/>
        {{ record.apt_predictions.map(apt => `${apt.apt}: ${apt.probability}`).join(', ') }}
      </span>
      <span v-else>
        无
      </span>
    </template>
    <template #timestamp="{ record }">
      {{ record.timestamp }}
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import { computed, ref, reactive } from 'vue';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import Maxprop from './maxprop.vue';
const props = defineProps({
  domainList: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  pagination: {
    type: Object,
    default: () => ({
      current: 1,
      pageSize: 10,
      total: 0
    })
  }
});
console.log('Received domainList:', props.domainList); // 添加日志确认数据传递
const columns = computed<TableColumnData[]>(() => [
  {
    title: '域名',
    dataIndex: 'domain',
    slotName: 'domainName',
    width: 150
  },
  {
    title: '状态',
    dataIndex: 'label',
    slotName: 'status',
    width: 100
  },
  {
    title: '可能的APT组织',
    dataIndex: 'apt_predictions',
    slotName: 'aptPredictions',
    width: 200
  },
  {
    title: '预测时间',
    dataIndex: 'timestamp',
    slotName: 'timestamp',
    width: 150
  }
]);
</script>

<style scoped lang="less">
:deep(.arco-table-th){
  background-color: #2e2e30;
  color:#f6f6f6
}
:deep(.arco-table-td) {
  background-color: #232324;
  color:#f6f6f6;
}
:deep(.arco-table-tr:hover),
:deep(.arco-table-tr:hover) > td {
  background-color: #3a3a3d !important;
}

.circle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.circle::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.red::before {
  background-color: #f5222d;
}

.green::before {
  background-color: #52c41a;
}

.circle:hover {
  color: #ff9900;
}

.red:hover::before {
  background-color: #ff6666;
}

.green:hover::before {
  background-color: #99ff66;
}
</style>